<template>
  <view class="work-container">
    <view class="card">
      <view class="card-content">
        <view @click="">
          <u-icon name="/static/images/daiban.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">待办</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/yiban.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">已办</text>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-content">
        <view>
          <u-icon name="/static/images/yinhuanshangbao.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">隐患上报</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/yinhuanzhenggai.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">隐患整改</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/yinhuanzhenggai.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">违章上报</text>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-content">
        <view>
          <u-icon name="/static/images/banzhuhuodong.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">班组活动</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/peixunrenwu.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">培训任务</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/zhishiku.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">知识库</text>
        </view>
      </view>
      <view class="card-content">
        <view>
          <u-icon name="/static/images/tiku.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">题库</text>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-content">
        <view>
          <u-icon name="/static/images/banzhuhuodong.png" size="40"></u-icon>
        </view>
        <view>
          <text class="text">体验学习</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/banner/banner01.jpg'
      },
      {
        image: '/static/images/banner/banner02.jpg'
      },
      {
        image: '/static/images/banner/banner03.jpg'
      }
      ]
    }
  },
  methods: {
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      this.$modal.showToast('模块建设中~')
    }
  }
}
</script>

<style lang="scss">
.work-container {
  background-color: #F0F2F9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  background-color: #fff;
  width: 90%;
  height: 200rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20rpx;
  border-radius: 20rpx;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* #endif */
.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}
</style>
